<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :operation="operation"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="regionDataForm"
        :model="regionDataForm"
        :rules="rules"
        label-width="125px"
        label-position="left"
        label-suffix=":"
      >
        <el-form-item
          :label="$t('regionLang.regionStatus')"
          v-if="operation !== 1"
        >
          <div style="margin-left: 5px">
            {{
              $t(
                getTitleByValue(
                  regionStatusOptions,
                  regionDataForm.regionStatus
                )
              )
            }}
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('depotLang.depot')"
          :prop="operation === 1 ? 'depotId' : ''"
        >
          <el-select
            v-model="regionDataForm.depotId"
            :placeholder="$t('pleaseEnter')"
            clearable
            v-if="operation === 1"
            style="width: 100%"
          >
            <el-option
              v-for="item in depotList"
              :key="item.value"
              :value="item.value"
              :label="$t(item.title)"
            ></el-option>
          </el-select>
          <div v-else style="margin-left: 5px">
            {{ regionDataForm.depotCodeAndName }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('regionLang.regionType')" prop="regionType">
          <el-select
            v-model="regionDataForm.regionType"
            :placeholder="$t('pleaseSelect')"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in regionTypeOptions"
              :key="item.value"
              :value="item.value"
              :label="$t('regionLang.' + item.title)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('regionLang.regionCode')"
          :prop="operation === 1 ? 'regionCode' : ''"
        >
          <el-input
            v-if="operation === 1"
            v-model="regionDataForm.regionCode"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
          <div v-else style="margin-left: 5px">
            {{ regionDataForm.regionCode }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('regionLang.regionName')" prop="regionName">
          <el-input
            v-model="regionDataForm.regionName"
            :placeholder="$t('pleaseEnter')"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <!-- <el-row type="flex" justify="end"> -->
        <el-button type="warning" plain size="small" @click="close">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
        <!-- </el-row> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import to from "await-to-js";
import { getDictOptionList, getTitleByValue } from "@/utils/dictUtils";
import { depotRegionTypeDict, depotStatusDict } from "@/utils/dictData";
import { getDepotList } from "@/api/business/depotManage/depot";
import {
  getDepotRegionInfo,
  addDepotRegion,
  modifyDepot,
} from "@/api/business/depotManage/partition";
export default {
  name: "RegionForm",
  props: {
    value: {
      type: Number,
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: undefined,
    },
    operation: {
      type: Number,
      default: 0, // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null,
    },
    width: {
      type: String,
      default: "750px",
    },
  },
  data() {
    return {
      depotList: [],
      submitLoading: false,
      getTitleByValue: getTitleByValue,
      regionTypeOptions: getDictOptionList(depotRegionTypeDict), //分区类型
      regionStatusOptions: getDictOptionList(depotStatusDict), //分区状态
      regionDataForm: {
        regionCode: null,
        regionName: null,
        regionType: null,
        depotId: null,
        createdUser: 0,
      },
      rules: {
        regionCode: [
          {
            required: true,
            message: this.$t("pleaseEnter"),
            trigger: ["blur", "change"],
          },
          {
            required: true,
            pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
            message: this.$t("depotLang.englishAndNumbers"),
            trigger: ["blur", "change"],
          },
        ],
        depotId: {
          required: true,
          message: this.$t("pleaseSelect"),
          trigger: "blur",
        },
        regionType: {
          required: true,
          message: this.$t("pleaseSelect"),
          trigger: "change",
        },
        regionName: {
          required: true,
          message: this.$t("pleaseEnter"),
          trigger: "blur",
        },
      },
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData();
        }
      },
    },
  },
  created() {
    this.getDepotList();
    this.getData();
  },
  methods: {
    // 仓库列表
    async getDepotList() {
      const { data } = await getDepotList();
      this.depotList = data;
      console.log(this.depotList);
    },

    // 提交
    async handleSubmit() {
      console.log(this.rules);
      if (this.operation === 2) {
        this.rules.depotId.required = false;
      }
      const [err] = await to(this.$refs.regionDataForm.validate());
      if (err === null) {
        if (this.operation === 1) {
          // 新增
          const res = await addDepotRegion(this.regionDataForm);
          if (res && res.returnCode === 10000) {
            this.$message.success({
              message: this.$t("handleSuccess"),
            });
            this.$emit("close");
            this.$emit("update:operation", 2);
          } else {
            this.$message.error(addErr.returnMsg);
          }
        } else if (this.operation === 2) {
          // 修改
          this.rules.depotId.required = false;
          const res = await modifyDepot({
            modifiedUser: 0,
            regionId: this.value,
            regionName: this.regionDataForm.regionName,
            regionType: this.regionDataForm.regionType,
          });

          if (res && res.returnCode === 10000) {
            this.$message.success({
              message: this.$t("handleSuccess"),
            });
            this.$emit("close");
          } else {
            this.$message.error(res.returnMsg);
          }
        }
      }
    },
    async getData() {
      if (!this.value || this.operation === 1) return;
      const res = await getDepotRegionInfo({
        regionId: this.value,
      });
      console.log(res);
      if (!res || res.data === null) return;
      this.regionDataForm = res.data;
      console.log(res.data);
    },
    // 清空表单
    reset() {
      this.regionDataForm = {
        regionCode: null,
        regionName: null,
        depotId: null,
        regionType: null,
        regionStatus: null,
        createdUser: 0,
      };
      this.$refs.regionDataForm.resetFields();
    },
    // 关闭
    close() {
      this.$emit("close");
    },
    closed() {
      this.reset();
    },
  },
};
</script>

<style></style>
